<template>
  <!-- <div class="container">
        <div class="box">
            <h3>用户登录</h3>
            <hr>
            <div class="content">
                <div class="item">
                    <span>账户:</span>
                    <input type="text" v-model="user.username">
                </div>
                <div class="item">
                    <span>密码:</span>
                    <input type="password" v-model="user.password">
                </div>
                <div class="item">
                    <button class="loginBtn" @click="loginApi">登录</button>
                    <div>
                         <router-link to="/register">没有账户?去注册</router-link>
                    </div>
                </div>
            </div>
        </div>
    </div> -->
  <div class="login_container">
    <div class="login_box">
      <div class="avatar_box">
        <img
          src="https://www.woniuxy.com/static/woniuopen/img/Frame%20265.png"
          alt=""
        />
      </div>
      <el-form class="login_form">
        <el-form-item label-width="0px">
          <el-input prefix-icon="el-icon-user" v-model="user.username"></el-input>
        </el-form-item>
        <el-form-item label-width="0px">
          <el-input prefix-icon="el-icon-goods" type="password" v-model="user.password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="loginbtn" @click="loginApi">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        username: "admin",
        password: "123",
      },
    };
  },
  methods: {
    async loginApi() {
      console.log(this);
      const { code, message, token } = await this.$api.users.login(this.user);
      if (code) {
       this.$message({
         type:'success',
         message:'登录成功'
       });
        //将token信息保存到本地存储中
        localStorage.setItem("token", token);
        //进行跳转到后台
        this.$router.push({
          path: "/home",
        });
      }else{
        this.$message({
         type:'error',
         message:'用户名或密码有误'
       });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import url("@/assets/css/reset.css");
.login_container {
  background-color: #000;
  height: 100vh;
}
.login_box {
  width: 400px;
  height: 280px;
  background-color: #fff;
  position: absolute;
  border-radius: 10px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.avatar_box {
  width: 100px;
  height: 100px;
  border: 1px solid #999;
  border-radius: 50%;
  padding: 10px;
  box-shadow: 0 0 10px #999;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
}
.avatar_box img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #999;
}
.login_form {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}
.loginbtn {
  width: 100%;
}
</style>